{extend name="public/container"}
{block name="content"}
<div id="myApp">
    <div class="douxue-filter padding-10 mb-20 flex flex-between" style="margin-bottom:20px">
        <el-form :inline="true" :model="where" size="mini" class="flex">
            <div class="flex flex-between">
                <el-form-item>
                    <el-select v-model="where.status" clearable placeholder="状态">
                        <el-option label="正常" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="where.keyword" placeholder="手机号/姓名">
                        <el-button slot="append" size="small" type="primary" @click="doLoadRows(1)" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
            </div>
        </el-form>

        <el-button type="primary" size="mini" @click="doAdd()">新增销售</el-button>
    </div>

    <div class="padding-10">
        <el-table
            :data="rows"
            style="width: 100%"
            v-loading="loading"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            size="mini">
            <el-table-column
                prop="id"
                label="ID"
                width="80"
                align="left">
            </el-table-column>

            <el-table-column
                prop="full_name"
                label="销售姓名"
                align="left">
            </el-table-column>

            <el-table-column
                prop="mobile"
                label="手机号"
                width="110"
                align="left">
            </el-table-column>

            <el-table-column
                prop="avatar"
                label="形象照片"
                width="160"
                align="left">
                <template slot-scope="scope">
                    <el-image
                        v-if="scope.row.avatar != undefined "
                        style="height: 30px"
                        fit="contain"
                        :src="scope.row.avatar"
                        :preview-src-list="[scope.row.avatar]">
                    </el-image>
                    <div v-else class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                prop="title"
                label="职务"
                width="110"
                align="left">
            </el-table-column>

            <el-table-column
                prop="admin_real_name"
                label="绑定管理员"
                width="110"
                align="left">
                <template slot-scope="scope">
                    <el-link :underline="false" type="primary" v-if="scope.row.admin_id>0">{{ scope.row.admin_real_name }}</el-link>
                    <el-link :underline="false" type="danger" v-else>未绑定</el-link>
                </template>
            </el-table-column>

            <el-table-column
                prop="user_nickname"
                label="绑定会员"
                width="110"
                align="left">
                <template slot-scope="scope">
                    <el-link :underline="false" type="success" v-if="scope.row.uid>0">{{ scope.row.user_nickname }}</el-link>
                    <el-link :underline="false" type="danger" v-else>未绑定</el-link>
                </template>
            </el-table-column>

            <el-table-column
                prop="user_nickname"
                label="小程序推广码"
                width="110"
                align="center">
                <template slot-scope="scope">
                    <template v-if="scope.row.spread_qr">
                        <el-link :underline="false" type="success" @click="generateSpreadQr(scope.row)">重置</el-link>
                        <el-link :underline="false" type="danger" :href="scope.row.spread_qr" target="_blank" >下载</el-link>
                    </template>
                    <template v-else>
                        <el-link :underline="false" type="warning" @click="generateSpreadQr(scope.row)">生成</el-link>
                    </template>
                </template>
            </el-table-column>

            <el-table-column
                label="状态"
                width="110"
                align="left">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                        active-color="#ff6a6c"
                        inactive-color="#999"
                        :active-value="1"
                        :inactive-value="0"
                        @change="doSetStatus(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                width="120"
                align="left">
                <template slot-scope="scope">
                    <el-link size="mini" :underline="false" type="primary" @click="doAdd(scope.row)">编辑</el-link>
                    <el-link size="mini" :underline="false" type="danger" @click="doDelete(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination">
        <el-pagination
            hide-on-single-page
            small
            layout="prev, pager, next"
            :total="rowsCount"
            :page-size="where.limit"
            @current-change="doLoadRows">
        </el-pagination>
    </div>

    <!-- 修改  -->
    <el-dialog title="新增/编辑" :visible.sync="dialogFormVisible" @close='closeDialog'>
        <el-form :model="formData" :rules="rules" ref="formData" label-width="100px" size="mini">
            <el-form-item label="真实姓名" prop="full_name">
                <el-input v-model="formData.full_name"></el-input>
            </el-form-item>

            <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="formData.mobile"></el-input>
            </el-form-item>

            <el-form-item label="职务" prop="title">
                <el-input v-model="formData.title"></el-input>
            </el-form-item>

            <el-form-item label="绑定管理员" prop="admin_id">
                <template v-if="formData.admin_real_name != '' && formData.admin_id > 0 && false">
                    <div class="flex">
                        <el-link :underline="false">{{ formData.admin_real_name }}</el-link>
                        <span style="color:#ff0000;margin-left: 10px; cursor: pointer;" @click="formData.admin_real_name='';formData.admin_id=''">修改</span>
                    </div>
                </template>
                <template v-else>
                    <el-select
                        v-model="formData.admin_id"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入管理员账号"
                        :remote-method="loadAdminList"
                        :loading="adminloading">
                        <el-option
                          v-for="item in adminList"
                          :key="item.id"
                          :label="item.real_name"
                          :value="item.id">
                        </el-option>
                    </el-select>
                    <el-tooltip class="item" effect="dark" content="请输入管理员账号进行搜索" placement="top-end">
                         <i class="el-icon-warning"></i>
                    </el-tooltip>
                </template>
            </el-form-item>

            <el-form-item label="绑定会员" prop="user_id">
                <template v-if="formData.user_nickname != '' && formData.uid > 0 ">
                    <div class="flex">
                        <el-link :underline="false">{{ formData.user_nickname }}</el-link>
                        <span style="color:#ff0000;margin-left: 10px; cursor: pointer;" @click="formData.user_nickname='';formData.uid=''">修改</span>
                    </div>
                </template>
                <template v-else>
                    <el-select
                        v-model="formData.uid"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入会员手机号"
                        :remote-method="loadUserList"
                        :loading="userloading">
                        <el-option
                          v-for="item in userList"
                          :key="item.uid"
                          :label="item.full_name || item.nickname"
                          :value="item.uid">
                        </el-option>
                    </el-select>
                    <el-tooltip class="item" effect="dark" content="请输入会员手机号进行搜索" placement="top-end">
                         <i class="el-icon-warning"></i>
                    </el-tooltip>
                </template>
            </el-form-item>

            <el-form-item label="形象照片" prop="avatar">
                <el-upload
                        class="avatar-uploader"
                        action="/admin/upload/image"
                        accept="image/jpeg,image/png,image/jpg"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="formData.avatar" :src="formData.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item label="客服二维码" prop="service_qr">
                <el-upload
                        class="avatar-uploader"
                        action="/admin/upload/image"
                        accept="image/jpeg,image/png,image/jpg"
                        :show-file-list="false"
                        :on-success="handleServiceQrSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="formData.service_qr" :src="formData.service_qr" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button size="small" type="primary" @click="doSave('formData')">确 定</el-button>
                <el-button size="small" @click="dialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 生成销售小程序推广二维码  -->
    <el-dialog title="小程序推广码" :visible.sync="showSpreadQr" @close="closeGenerateSpreadQr">
        <el-form :model="spreadQr" label-width="100px" size="mini">
            <!-- <el-form-item label="背景图片">
                <el-upload
                        class="avatar-uploader"
                        action="/admin/upload/image"
                        accept="image/jpeg,image/png,image/jpg"
                        :show-file-list="false"
                        :on-success="handlePosterSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="spreadQr.background" :src="spreadQr.background" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div slot="tip" class="el-upload__tip">png/jpg图片不超过2M。尺寸750*1334或等比例</div>
                </el-upload>
            </el-form-item> -->

            <el-form-item label="推广码" v-if="spreadQr.spread_qr">
                <div class="avatar-uploader">
                    <div class="el-upload">
                        <img v-if="spreadQr.spread_qr" :src="spreadQr.spread_qr" class="avatar">
                    </div>
                </div>
            </el-form-item>

            <el-form-item>
                <el-button size="small" type="primary" @click="doGenerateSpreadQr">立即生成</el-button>
                <el-button size="small" @click="showSpreadQr = false">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
{/block}
{block name="script"}
<script>
    var _formData = {
        id: '',
        full_name: '',
        mobile: '',
        title: '',
        admin_id: '',
        user_id: '',
        avatar: '',
        service_qr: ''
    }
    var my = new Vue({
        el: "#myApp",
        data(){
            return {
                dialogFormVisible: false,
                formData: _formData,
                rules: {
                    full_name: [
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ],
                    mobile: [
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ]
                },
                rowsCount: 0,
                rows: [],
                where: {
                    keyword: '',
                    status:'',
                    page:1,
                    limit:pageSize,
                },
                loading:false,
                adminList: [],
                adminloading: false,
                userList: [],
                userloading: false,
                spreadQr: {
                    id: 0,
                    uid: 0,
                    background: '',
                    spread_qr: null
                },
                showSpreadQr: false
            }
        },
        methods: {
            doLoadRows (page) {
                this.loading = true
                this.where.page  = page || 1
                axios.get(Url({a:'get_list' , q:this.where}))
                    .then(res => {
                        this.rows = res.data.data
                        this.rowsCount =res.data.count
                        this.loading = false
                    })
            },
            doSetStatus (row) {
                axios.get(Url({a:'set_status',q:{status:row.status,id:row.uid}}))
                    .then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                            onClose: _ => {
                                if (res.data.code !== 200) {
                                    this.doLoadRows()
                                }
                            }
                        })
                    })
            },
            doAdd (row) {
                if ( row != undefined ) {
                    this.formData = row
                } else {
                    this.formData = _formData
                }
                this.dialogFormVisible = true;
            },
            doDelete (uid) {
                this.$confirm('确认删除该条记录?').then(_ => {
                    axios.get(Url({a:'delete' , q:{uid:uid}})).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                        })
                    }).catch(_ => {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    })

                    return this.doLoadRows();
                }).catch(_ => {})
            },
            closeDialog () {
                this.$refs['formData'].clearValidate();
            },
            doSave (formName ) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post( Url({a:'save'}) , this.formData).then(res => {
                            if ( res.data.code != 200 ) {
                                return this.$message.error(res.data.msg)
                            }

                            this.$message.success('操作成功')
                            this.dialogFormVisible = false;
                            this.doLoadRows(1)
                        }).catch(_ => {
                            this.$message({
                                message: '操作失败',
                                type: 'error'
                            })
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleAvatarSuccess(res, file , fileList) {
                this.formData.avatar = res.url;
            },
            handleServiceQrSuccess(res, file , fileList) {
                this.formData.service_qr = res.url;
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 5;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                }
                return isLt2M;
            },
            loadAdminList(keyword) {
                axios.get(Url({c:'setting.system_admin',a:'get_list',q:{account:keyword}})).then(res => {
                    this.adminList = res.data.data
                })
            },
            loadUserList(keyword) {
                axios.get(Url({c:'user.user',a:'get_list',q:{keyword:keyword}})).then(res => {
                    this.userList = res.data.data
                })
            },
            generateSpreadQr(row) {
                this.spreadQr.id = row.id || 0
                this.spreadQr.uid = row.uid || 0
                this.spreadQr.spread_qr = row.spread_qr || ''

                this.showSpreadQr = true
            },
            handlePosterSuccess(res, file , fileList) {
                this.spreadQr.background = res.url;
            },
            doGenerateSpreadQr() {
                if ( !this.spreadQr.id || !this.spreadQr.uid ) return this.$message.error('异常【1001】!');

                let _loading = this.$loading({
                    lock: true,
                    text: '生成中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });

                axios.post( Url({a:'generateSpreadQr'}) , this.spreadQr).then(res => {
                    _loading.close()
                    if ( res.data.code != 200 ) {
                        return this.$message.error(res.data.msg)
                    }
                    this.spreadQr = res.data.data
                    this.$message.success('操作成功')
                }).catch(_ => {
                    _loading.close()
                    this.$message.error('操作失败')
                })

            }
            ,closeGenerateSpreadQr() {
                this.doLoadRows()
            }
        },
        mounted(){
            this.doLoadRows()
        }
    })
</script>
{/block}